<template>
<div>
  <!-- A1-2** -->
  <el-row :gutter="20">
    <!-- 201 -->
    <el-col :span="6">
            <div style="text-align:center;">
              <el-image 
                style="width: 100px; height: 100px; "
                :src="A1201" 
                :preview-src-list="List201">
              </el-image>
              <br>
              <el-button type="primary" plain>A1-201</el-button>
          </div>
    </el-col>
    <!-- 202 -->
    <el-col :span="6">
      <div style="text-align:center;">
        <el-image 
            style="width: 100px; height: 100px"
            :src="A1202" 
            :preview-src-list="List202">
        </el-image>
        <br>
        <el-button type="primary" plain>A1-202</el-button>
      </div>
    </el-col>
    <!-- 203 -->
    <el-col :span="6">
      <div style="text-align:center;">
        <el-image 
            style="width: 100px; height: 100px"
            :src="A1203" 
            :preview-src-list="List203">
        </el-image>
        <br>
        <el-button type="primary" plain>A1-203</el-button>
      </div>
    </el-col>
    <!-- 204 -->
    <el-col :span="6">
      <div style="text-align:center;">
        <el-image 
            style="width: 100px; height: 100px"
            :src="A1204" 
            :preview-src-list="List204">
        </el-image>
        <br>
        <el-button type="primary" plain>A1-204</el-button>
      </div></el-col>
  </el-row>
  <!-- A1-3** -->
  <el-row :gutter="20">
    <!-- 301 -->
    <el-col :span="6">
            <div style="text-align:center;">
              <el-image 
                style="width: 100px; height: 100px; "
                :src="A1301" 
                :preview-src-list="List301">
              </el-image>
              <br>
              <el-button type="primary" plain>A1-301</el-button>
          </div>
    </el-col>
    <!-- 302 -->
    <el-col :span="6">
      <div style="text-align:center;">
        <el-image 
            style="width: 100px; height: 100px"
            :src="A1302" 
            :preview-src-list="List302">
        </el-image>
        <br>
        <el-button type="primary" plain>A1-302</el-button>
      </div>
    </el-col>
    <!-- 303 -->
    <el-col :span="6">
      <div style="text-align:center;">
        <el-image 
            style="width: 100px; height: 100px"
            :src="A1303" 
            :preview-src-list="List303">
        </el-image>
        <br>
        <el-button type="primary" plain>A1-303</el-button>
      </div>
    </el-col>
    <!-- 304 -->
    <el-col :span="6">
      <div style="text-align:center;">
        <el-image 
            style="width: 100px; height: 100px"
            :src="A1304" 
            :preview-src-list="List304">
        </el-image>
        <br>
        <el-button type="primary" plain>A1-304</el-button>
      </div></el-col>
  </el-row>
  <!-- A1-4** -->
  <el-row :gutter="20">
    <!-- 401 -->
    <el-col :span="6">
            <div style="text-align:center;">
              <el-image 
                style="width: 100px; height: 100px; "
                :src="A1401" 
                :preview-src-list="List401">
              </el-image>
              <br>
              <el-button type="primary" plain>A1-401</el-button>
          </div>
    </el-col>
    <!-- 402 -->
    <el-col :span="6">
      <div style="text-align:center;">
        <el-image 
            style="width: 100px; height: 100px"
            :src="A1402" 
            :preview-src-list="List402">
        </el-image>
        <br>
        <el-button type="primary" plain>A1-402</el-button>
      </div>
    </el-col>
    <!-- 403 -->
    <el-col :span="6">
      <div style="text-align:center;">
        <el-image 
            style="width: 100px; height: 100px"
            :src="A1403" 
            :preview-src-list="List403">
        </el-image>
        <br>
        <el-button type="primary" plain>A1-403</el-button>
      </div>
    </el-col>
    <!-- 404 -->
    <el-col :span="6">
      <div style="text-align:center;">
        <el-image 
            style="width: 100px; height: 100px"
            :src="A1404" 
            :preview-src-list="List404">
        </el-image>
        <br>
        <el-button type="primary" plain>A1-404</el-button>
      </div></el-col>
  </el-row>
  <!-- A1-5** -->
  <el-row :gutter="20">
    <!-- 501 -->
    <el-col :span="6">
            <div style="text-align:center;">
              <el-image 
                style="width: 100px; height: 100px; "
                :src="A1501" 
                :preview-src-list="List501">
              </el-image>
              <br>
              <el-button type="primary" plain>A1-501</el-button>
          </div>
    </el-col>
    <!-- 502 -->
    <el-col :span="6">
      <div style="text-align:center;">
        <el-image 
            style="width: 100px; height: 100px"
            :src="A1502" 
            :preview-src-list="List502">
        </el-image>
        <br>
        <el-button type="primary" plain>A1-502</el-button>
      </div>
    </el-col>
    <!-- 503 -->
    <el-col :span="6">
      <div style="text-align:center;">
        <el-image 
            style="width: 100px; height: 100px"
            :src="A1503" 
            :preview-src-list="List503">
        </el-image>
        <br>
        <el-button type="primary" plain>A1-503</el-button>
      </div>
    </el-col>
    <!-- 504 -->
    <el-col :span="6">
      <div style="text-align:center;">
        <el-image 
            style="width: 100px; height: 100px"
            :src="A1504" 
            :preview-src-list="List504">
        </el-image>
        <br>
        <el-button type="primary" plain>A1-504</el-button>
      </div></el-col>
  </el-row>
</div>
</template>

<script>
export default {
  name: 'Information',
  data() {
      return {
        A1201 : '../../../static/erooms/A1-201(1).png',
        List201 : [
          '../../../static/erooms/A1-201(1).png',
          '../../../static/erooms/A1-201(2).png'
        ],
        A1202 : '../../../static/erooms/A1-202(1).png',
        List202 : [
          '../../../static/erooms/A1-202(1).png',
          '../../../static/erooms/A1-202(2).png'
        ],
        A1203 : '../../../static/erooms/A1-203(1).png',
        List203 : [
          '../../../static/erooms/A1-203(1).png',
          '../../../static/erooms/A1-203(2).png'
        ],
        A1204 : '../../../static/erooms/A1-204(1).png',
        List204 : [
          '../../../static/erooms/A1-204(1).png',
          '../../../static/erooms/A1-204(2).png'
        ],
        A1301 : '../../../static/erooms/A1-301(1).png',
        List301 : [
          '../../../static/erooms/A1-301(1).png',
          '../../../static/erooms/A1-301(2).png'
        ],
        A1302 : '../../../static/erooms/A1-302(1).png',
        List302 : [
          '../../../static/erooms/A1-302(1).png',
          '../../../static/erooms/A1-302(2).png'
        ],
        A1303 : '../../../static/erooms/A1-303(1).png',
        List303 : [
          '../../../static/erooms/A1-303(1).png',
          '../../../static/erooms/A1-303(2).png'
        ],
        A1304 : '../../../static/erooms/A1-304(1).png',
        List304 : [
          '../../../static/erooms/A1-304(1).png',
          '../../../static/erooms/A1-304(2).png'
        ],
        A1401 : '../../../static/erooms/A1-401(1).png',
        List401 : [
          '../../../static/erooms/A1-401(1).png',
          '../../../static/erooms/A1-401(2).png'
        ],
        A1402 : '../../../static/erooms/A1-402(1).png',
        List402 : [
          '../../../static/erooms/A1-402(1).png',
          '../../../static/erooms/A1-402(2).png'
        ],
        A1403 : '../../../static/erooms/A1-403(1).png',
        List403 : [
          '../../../static/erooms/A1-403(1).png',
          '../../../static/erooms/A1-403(2).png'
        ],
        A1404 : '../../../static/erooms/A1-404(1).png',
        List404 : [
          '../../../static/erooms/A1-404(1).png',
          '../../../static/erooms/A1-404(2).png'
        ],
        A1501 : '../../../static/erooms/A1-501(1).png',
        List501 : [
          '../../../static/erooms/A1-501(1).png',
          '../../../static/erooms/A1-501(2).png'
        ],
        A1502 : '../../../static/erooms/A1-502(1).png',
        List502 : [
          '../../../static/erooms/A1-502(1).png',
          '../../../static/erooms/A1-502(2).png'
        ],
        A1503 : '../../../static/erooms/A1-503(1).png',
        List503 : [
          '../../../static/erooms/A1-503(1).png',
          '../../../static/erooms/A1-503(2).png'
        ],
        A1504 : '../../../static/erooms/A1-504(1).png',
        List504 : [
          '../../../static/erooms/A1-504(1).png',
          '../../../static/erooms/A1-504(2).png'
        ]
      }
    }
}
</script>

<style>

.el-row {
    margin-bottom: 20px;
    
  }
  .el-col {
    border-radius: 4px;
  }
</style>
